import css from 'styled-jsx/css'

export const addContainer = css`
  .add-container{
    width:50px;
    height:50px;
    background: #e25e5e;
    border-radius: 100%;
    position: fixed;
    right: 100px;
    bottom: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
`

export const searchContainer = css`
  .search-container {
    height: 70px;
    line-height: 70px;
    padding: 0 20px;
    max-width: 500px;
    margin: 0 auto;
  }
  .input-container{
    display:  inline-block;
    cursor: pointer;
    input{
      transition: all .3s;
      border-bottom: 1px solid #e25e5e;
      height:20px;
      margin-left: 5px;
      width: 0;
    }
    &.active input{
      width: 200px;
    }
  }
`

export const list = css`
  a {
    display: block;
    color: #555;
    margin-top: 5px;
    padding: 0 5px;
    transition: all .1s;
    &:hover{
      background: #e99393;
      color: #fff;
      border-radius: 5px;
    }
  }
  span{
    margin-right: 5px;
  }
`

export const container = css`
  .container {
    margin: 30px auto;
    max-width: 500px;
    position: relative;
    height: 80vh;
  }
`